<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-ajax-test</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto;
            text-align: center;
            background: #ccc;
        }
        img{
            width: 200px;
            height: 200px;
            display: block;
            margin: 10px auto 10px;
            border: 1px solid #000;
        }
        p{
            text-align: center;
            background: pink;
        }
    </style>
    <script src="myAjax2.js"></script>
    <script>
        window.onload=function (ev) {
            var oTitle=document.querySelector("#title");
            var oDes=document.querySelector("#des");
            var oImg=document.querySelector("img");

            var oBtns=document.querySelectorAll("button");
            oBtns[0].onclick=function () {
                //发送ajax请求到服务器
                var self=this;
                ajax({
                    type:"GET",
                    url:"10-ajax-test.xml",
                    data: {"name":this.getAttribute("name")},
                    timeout:3000,
                    success:function (xhr) {
                        /*//alert(xhr.responseText);
                        var res=xhr.responseText.split("|");  //用于把一个字符串分割成字符串数组
                        //console.log(res);
                        oTitle.innerHTML=res[0];
                        oDes.innerHTML=res[1];
                        oImg.setAttribute("src",res[2]);*/
                        var name=self.getAttribute("name");
                        var info=xhr.responseXML;
                        var title=info.querySelector(name+">title").innerHTML;
                        var des=info.querySelector(name+">des").innerHTML;
                        var image=info.querySelector(name+">image").innerHTML;
                        oTitle.innerHTML=title;
                        oDes.innerHTML=des;
                        oImg.setAttribute("src",image);
                    },
                    error:function (xhr) {
                        alert(xhr.status);
                    }
                });
            }
            oBtns[1].onclick=function () {
                var self1=this;
                ajax({
                    type:"GET",
                    url:"10-ajax-test.xml",
                    data:{"name":this.getAttribute("name")},
                    timeout:3000,
                    success:function (xhr) {
                        var name=self1.getAttribute("name");
                        var res=xhr.responseXML;
                        var title=res.querySelector(name+">title").innerHTML;
                        var des=res.querySelector(name+">des").innerHTML;
                        var image=res.querySelector(name+">image").innerHTML;
                        oTitle.innerHTML=title;
                        oDes.innerHTML=des;
                        oImg.setAttribute("src",image);
                    },
                    error:function (xhr) {
                        alert(xhr.status);
                    }
                });
            }
            oBtns[2].onclick=function () {
                var self2=this;
                ajax({
                    type:"GET",
                    url:"10-ajax-test.php",
                    data:{"name":this.getAttribute("name")},
                    timeout:3000,
                    success:function (xhr) {
                        var name=self2.getAttribute("name");
                        var str=xhr.responseText;
                        var obj=JSON.parse(str);
                        var subObj=obj[name];
                        oTitle.innerHTML=subObj.title;
                        oDes.innerHTML=subObj.des;
                        oImg.setAttribute("src",subObj.image);
                    },
                    error:function (xhr) {
                        alert(xhr.status);
                    }
                });
            }
        }
    </script>
</head>
<body>
<div>
    <p id="title">商品标题名称</p>
    <img src="" alt="">
    <p id="des">商品描述信息</p>
    <button name="nz">女装</button>
    <button name="bb">包包</button>
    <button name="tx">拖鞋</button>
</div>
</body>
</html>